import React, { Component } from 'react'
import { connect } from 'dva';

import Link from 'umi/link';
import { Button } from 'antd';
import ListCard from '@/components/ListCard';
import DividerItem from '@/components/DividerItem'

const KEYS = [
  { key: 'name', name: '角色名' },
]

interface Props {
  dispatch?: Function,
  details: {
    id: number,
    companyId: number
  },
  match: {
    params: {
      id: number
    }
  },
}

@connect(({ role }) => ({
  details: role.details
}))
class Details extends Component<Props, any> {

  state = {
    data: []
  }

  componentDidMount() {
    const { dispatch, match } = this.props;
    const { params } = match;

    dispatch({
      type: 'role/queryInfoById',
      payload: params.id
    })
  }

  render() {
    const { details = {} } = this.props;
    const data = [];

    KEYS.forEach(item => {
      data.push({
        name: item.name,
        value: details[item.key],
      })
    });

    const Tmp1 = () => (
      <>
        <ListCard data={data} />
        <Link to="/data/role" >
          <Button type="primary" style={{ marginTop: '50px', width: "80px"}}>返&nbsp;&nbsp;&nbsp;回</Button>
        </Link>
      </>
    )

    const Msg = DividerItem({ WrapperComponent: () => <Tmp1 />, 
      icon: "appstore", title: '详细信息', height: 'auto'});

    return (
      <Msg />
    );
  }
}

export default Details;
